 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.nav,.footer{
				width: 100%;
				height: 200px;
				line-height: 200px;
				font-size: 20px;
				font-weight: bold;
				background: orange;
				text-align: center;
			}
			.floor{
				height: 600px;
				line-height: 600px;
				border: 5px solid blueviolet;
				font-weight: bold;
				font-size: 20px;
				text-align: center;
			}
			.list ul li{
				width: 30px;
				height: 30px;
				background: aqua;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
				list-style: none;
				margin-bottom: 5px;
				border-radius: 2px;
			}
			.list{
				position: fixed;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			.list .on{
				background: yellow;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="nav">这里是头部</div>
		<div>
			<div class="floor">第1楼</div>
			<div class="floor">第2楼</div>
			<div class="floor">第3楼</div>
			<div class="floor">第4楼</div>
			<div class="floor">第5楼</div>
			<div class="floor">第6楼</div>
			<div class="floor">第7楼</div>
			<div class="floor">第8楼</div>
			<div class="floor">第9楼</div>
			<div class="floor">第10楼</div>
		</div>
		<div class="footer">这里是底部</div>
		<div class="list">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
			</ul>
		</div>
	</body>
	<script src="jquery-1.10.1.min.js"></script>
    <script>
    	var floor = $(".floor");
    	
    	var btns = $(".list li");
    	
    	$(window).scroll(function(){
    		
    		var stop = $(this).scrollTop();
    		
    		//遍历所有楼层
    		floor.each(function(){
    			//获取当前元素的top值
    			var cur = $(this).offset().top;
    			
    			if(stop>cur){
    				var index = $(this).index();
    				btns.eq(index).addClass("on").siblings().removeClass("on")
    			}
    			
    			
    		});
    		
    	});
    	
    	
    	btns.click(function(){
    		var index  = $(this).index;
    		console.log(index);
    	})
    	
    		
    			
    			
    			
    			
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	/*
    	 
    	 * 
    	 * 
    	 * */
    </script>
</html>
